import { Button, Form, Input, Layout, message, Radio, Space, Switch, Tabs } from 'antd';
import React, { useState, useRef, useEffect } from 'react';

import singleSignSvc from '@/api/services/singleService';
import userService from '@/api/services/userService';
import { SvgIcon } from '@/components/icon';
import { CircleLoading } from '@/components/loading';
import TipsModals from '@/components/modals/TipsModals';
import JsonEditor from '@/components/Textarea/JsonEditor';
import TipDesc from '@/components/tipDesc/tipDesc';
import useWindowWidth from '@/hooks/event/use-window-width';
import { useRouter } from '@/router/hooks';
import { useConfigActions, useManagePage } from '@/store/configStore';
import { useUserState, useUserInfo } from '@/store/userStore';
import { useThemeToken } from '@/theme/hooks';

import FusionappModel from './components/FusionappModel';
import './style/single-sign.css';

const { Header } = Layout;

type KeyValuePair<T = any> = {
  first: string;
  second: T;
};

interface pageType {
  page: number | string;
  page_size: number | string;
  searchText: string;
  app_type: string | null;
  app_workbench_type: string;
  app_status: string | null;
  offset: number | string;
}
interface FormBaseValue {
  [key: string]: any;
}

interface FormBaseValue {
  [key: string]: any;
}

const App: React.FC = () => {
  const themeToken = useThemeToken();

  const router = useRouter();
  const managePage = useManagePage();
  const { isPc } = useWindowWidth();

  const [radiaType, setRadiaType] = useState(1);
  const [tabType, setTabType] = useState('1');
  const [tourl, setTourl] = useState('');
  const [tourlOauth2, setTourlOauth2] = useState('');
  const [tourlWx, setTourlWx] = useState('');

  const [tabItem, setTabItem] = useState([]);

  const [form] = Form.useForm();
  const [formOauth] = Form.useForm();
  const [formVx] = Form.useForm();

  const { fetchInitialInfo } = useConfigActions();

  const [formBaseValue, setFormBaseValue] = useState<FormBaseValue>({
    privider_name: '',
    userinfolocation: ' ',
    protocolName: 'cas',
    standard: true,
    service_url: '',
    cas_url: '',
    isFusionApp: false,
    userinfo: {
      list: [
        {
          first: 'userinfolocation',
          second: '',
        },
        {
          first: 'userName',
          second: '',
        },
        {
          first: 'userID',
          second: '',
        },
      ],
    },
  });
  const [formBaseValueOauth, setFormBaseValueOauth] = useState<FormBaseValue>({
    provider_name: '',
    protocolName: 'oauth2',
    userinfolocation: '',

    standard: true,
    IsAppID: false,
    login_url: '',
    redirect_url: '',
    client_id: '',
    client_secret: '',
    redeem_url: '',
    redeem_url_kworgs: { list: [] },
    logout_url: '',
    logout_url_extra: '',
    login_url_kwargs: { list: [] },
    access_token_url: '',
    access_token_kwargs: { list: [] },
    access_standard: false,
    profile_url: '',
    profile_url_kwargs: { list: [] },
    db_settings: { list: [] },
    scope: '',
    grant_type: '',
    token: { list: [] },
    isFusionApp: false,
    userinfo: {
      list: [
        {
          first: 'userinfolocation',
          second: '',
        },
        {
          first: 'userName',
          second: '',
        },
        {
          first: 'userID',
          second: '',
        },
      ],
    },
  });
  const [formBaseValueVx, setFormBaseValueVx] = useState<FormBaseValue>({
    provider_name: '',
    protocolName: 'wxwork',
    standard: false,
    login_url: '',
    redirect_url: '',
    client_id: '',
    client_secret: '',
    redeem_url: '',
    redeem_url_kworgs: { list: [] },
    logout_url: '',
    logout_url_extra: '#wechat_redirect',
    login_url_kwargs: { list: [] },
    access_token_url: '',
    access_token_kwargs: { list: [] },
    access_standard: false,
    profile_url: '',
    profile_url_kwargs: { list: [] },
    db_settings: { list: [] },
    scope: '',
    grant_type: '',
    token: { list: [] },

    userinfo: {
      list: [
        {
          first: 'userinfolocation',
          second: '',
        },
        {
          first: 'userName',
          second: '',
        },
        {
          first: 'userID',
          second: '',
        },
      ],
    },
  });

  const [isShowlabel, setIsShowlabel] = useState(false);

  const [isShowModel, setIsShowModel] = useState(false);
  const [fusionAppList, setFusionAppList] = useState([]);
  const [isHaveData, setIsHaveData] = useState(false);
  const [isNoData, setIsNoData] = useState(false);

  const [flag, setFlag] = useState(false);

  const [appid, setAppId] = useState(null);
  const [appidOauth, setAppIdOauth] = useState(null);
  const [fusionUrl, setFusionUrl] = useState('');
  const [fusionUrlOauth, setFusionUrlOauth] = useState('');
  const [fusionName, setFusionName] = useState(null);
  const [fusionNameOauth, setFusionNameOauth] = useState(null);

  const [fusionApp, setFusionApp] = useState(null);
  const [fusionAppOauth, setFusionAppOauth] = useState(null);

  const [isappid, setIsappid] = useState(false);
  const [extraJson, setExtraJson] = useState('');
  const [isloading, setIsloading] = useState(false);
  const [localAccountEnabled, setLocalAccountEnabled] = useState(false);
  const [showConfirmModal, setShowConfirmModal] = useState(false);
  const { userInfo } = useUserState();
  const [casSerciceUrl, setCasSerciceUrl] = useState(`${window.location.origin}/cas/auth`);
  const [oauthRedirectUri, setOauthRedirectUri] = useState(`${window.location.origin}/oauth2/auth`);

  // const demojson =
  //   '返回信息示例:{\r\n"code": 200,\r\n"user": {\r\n  "id": 4,\r\n  "account": "zhangsan3",\r\n  "domain": "@zhangsan.com",\r\n  "status": 1,\r\n},\r\n"msg":"操作成功"\r\n}';

  const demojson =
    '返回信息示例:{\r\n"code": 200,\r\n"user": {\r\n  "id": 2019151807,\r\n  "account": "zhangsan3",\r\n  "domain": "@zhangsan.com",\r\n  "status": 1,\r\n},\r\n"msg":"操作成功"\r\n}';

  const fusionModelCancel = () => {
    setIsShowModel(false);
  };

  const abortControllerRef = useRef<AbortController | null>(null);

  const isTiangong = Boolean(userInfo?.is_TianGong === true);
  const { username } = useUserInfo();
  useEffect(() => {
    if (username) {
      const isRoot = username == 'root';
      const isTiangongSuperAdmin = isTiangong && userInfo?.role?.code === 'super_admin';

      if (!isRoot && !isTiangongSuperAdmin) {
        router.replace('/403');
      }
    }
  }, [username, isTiangong, userInfo]);

  useEffect(() => {
    if (tabType === '1') {
      localStorage.setItem('appId', appid || '');
    } else {
      localStorage.setItem('appId', appidOauth || '');
    }
  }, [appid, appidOauth]);

  const goToAssistant = (item: any[]) => {
    console.log('=goToAssistant==========', item);

    if (tabType == '1') {
      if (item.length === 0) {
        setAppId(null);
        setFusionUrl('');
        setFusionName(null);
      } else {
        setAppId(item[0].app_id);
        const url = `${window.location.origin}/apps/orchestration?appid=${item[0].app_id}&shareId=${item[0].share_id}`;
        setFusionUrl(url);
        setFusionName(item[0].app_name);
      }
    } else if (item.length === 0) {
      setAppIdOauth(null);
      setFusionUrlOauth('');
      setFusionNameOauth(null);
    } else {
      setAppIdOauth(item[0].app_id);
      const url = `${window.location.origin}/apps/orchestration?appid=${item[0].app_id}&shareId=${item[0].share_id}`;
      setFusionUrlOauth(url);
      setFusionNameOauth(item[0].app_name);
      // localStorage.setItem('appid', item[0].app_id);
    }

    setIsShowModel(false);
  };

  // useEffect(() => {
  //   getFusionAppList();
  // }, [defaultPage]);

  const getinit = async () => {
    setIsloading(true);
    try {
      let propData;
      if (tabType == '1') {
        propData = {
          // provider_name: 'tmu',
          protocolName: 'cas',
        };
      } else if (tabType == '2') {
        propData = {
          // provider_name: 'jmu',
          protocolName: 'oauth2',
        };
      } else {
        propData = {
          // provider_name: 'jmu',
          protocolName: 'wxwork',
        };
      }

      const data = await singleSignSvc.postSsoSettingCheck(propData);

      if (tabType == '1') {
        form.setFieldsValue(transform(data));
        setAppId(data.fusionApp);
        setTourl(data.showurl);
        setFusionName(data.appName);
        setFusionApp(data.fusionApp);
        setCasSerciceUrl(data.service);
      } else if (tabType == '2') {
        formOauth.setFieldsValue(transform(data));
        setIsappid(data.IsAppID);
        setAppIdOauth(data.fusionApp);
        setTourlOauth2(data.showurl);
        setFusionNameOauth(data.appName);
        setFusionAppOauth(data.fusionApp);
        setOauthRedirectUri(data.redirect_uri);
        const shouldSetEmpty =
          !data?.extra || // 处理 undefined/null
          (typeof data.extra === 'object' && Object.keys(data.extra).length === 0); // 处理 {} 或 []

        if (shouldSetEmpty) {
          console.log('设置空值');
          setExtraJson('');
        } else {
          console.log('设置实际值');
          setExtraJson(data.extra);
        }
      } else {
        formVx.setFieldsValue(transform(data));
        setTourlWx('/openapi/v1/sso/login');
      }
    } catch (error) {
    } finally {
      setIsloading(false);
    }
  };

  // const getToUrl = async() =>{
  //   try{
  //     const res =  await singleSignSvc.oauth2Login()
  //     console.log(res);

  //   }catch (error) {

  //   }
  // }

  const transform = (data: any) => {
    console.log('data444444=======', data);

    const userinfoEntries = convertObjectToKeyValueArray(data.userinfo || {});
    const newExtra = convertObjectToKeyValueArray(data.extra || {});
    // const newExtra = JSON.stringify(data.extra || '{}') ;

    // const newredirect_uri = data.redirect_uri.split('/oauth2/auth')[0];
    // (data.extra || {})

    const newStandard = data.standard != 'No';

    const newData = {
      ...data,
      extra: {
        list: newExtra,
      },
      // extra:newExtra,
      standard: newStandard,
      userinfo: {
        list: userinfoEntries,
      },
      userID: data.userinfo.userID,
      userName: data.userinfo.userName,
      userinfolocation: data.userinfo.userinfolocation || '',
      // redirect_uri: newredirect_uri,
    };

    console.log('newData=============', newData);

    return newData;
  };

  function convertObjectToKeyValueArray<T>(obj: Record<string, T>): KeyValuePair<string | T>[] {
    return Object.entries(obj || {}).map(([key, value]) => ({
      first: key,
      second: typeof value === 'object' && value !== null ? JSON.stringify(value) : value,
    }));
  }

  useEffect(() => {
    console.log('radiaType==========', radiaType, tabType);
    getinit();
  }, [tabType]);

  // 获取本地账户登录配置
  useEffect(() => {
    if (tabType === '3') {
      getLocalAccountConfig();
    }
  }, [tabType]);

  const getLocalAccountConfig = async () => {
    try {
      const config = await userService.getSystemAccountConfig();
      setLocalAccountEnabled(config.allowLocalAccount);
    } catch (error) {
      console.error('获取本地账户配置失败:', error);
    }
  };

  const handleLocalAccountToggle = async (checked: boolean) => {
    // 如果是关闭操作，需要二次确认
    if (!checked) {
      setShowConfirmModal(true);
      return;
    }

    // 如果是开启操作，直接执行
    await updateLocalAccountConfig(checked);
  };

  const updateLocalAccountConfig = async (checked: boolean) => {
    try {
      await userService.updateSystemAccountConfig({ allowLocalAccount: checked });
      await fetchInitialInfo();
      setLocalAccountEnabled(checked);
      // message.success('配置更新成功');
    } catch (error) {
      console.error('更新本地账户配置失败:', error);
      // message.error('配置更新失败');
      // 恢复原状态
      setLocalAccountEnabled(!checked);
    }
  };

  const handleConfirmClose = async () => {
    await updateLocalAccountConfig(false);
    setShowConfirmModal(false);
  };

  const radiaTypeChange = (e: any) => {
    setRadiaType(e);
  };

  const items2 = [
    {
      key: '1',
      label: 'CAS 协议',
      // icon: <AppleOutlined />,
      children: (
        <div>
          {isloading ? (
            <div style={{ height: '300px', width: '100%' }}>
              <CircleLoading />
            </div>
          ) : (
            <div>
              <div
                style={{
                  marginTop: '10px',
                  borderRadius: '8px',
                  height: '40px',
                  display: 'flex',
                  alignItems: 'center',
                  backgroundColor: '#F0F7FF',
                  marginBottom: '10px',
                }}
              >
                <SvgIcon icon="singletip" size="22px" style={{ margin: '0 4px 0 20px' }} />
                遵从标准CAS协议
              </div>

              <div
                style={{
                  fontWeight: 400,
                  fontSize: '16px',
                  color: '#6C7180',
                  marginTop: '30px',
                  height: 'calc(100vh - 320px)',
                  overflow: 'auto',
                }}
              >
                <Form initialValues={formBaseValue} form={form} layout="horizontal">
                  <Form.Item
                    label="CAS 登录地址"
                    name="cas_url"
                    rules={[{ required: true, message: '请输入地址' }]}
                    className="formlabel formitem"
                  >
                    <Input
                      style={{ borderRadius: '6px', border: '1px solid #DBDBDC', width: '620px' }}
                      placeholder="请输入地址"
                    />
                  </Form.Item>
                  <span
                    style={{
                      width: '620px',
                      marginLeft: '200px',
                      color: '#86909C',
                      fontSize: '12px',
                    }}
                  >
                    CAS服务端的根地址，用于拼接认证端点
                  </span>

                  <div style={{ display: 'flex', marginTop: '20px' }}>
                    <Form.Item
                      label="CAS 认证服务器登录地址"
                      // name="service"
                      rules={[{ required: true, message: '请输入地址' }]}
                      className="formlabel formitem redicon"
                    >
                      <Input
                        disabled
                        style={{ borderRadius: '6px', border: '1px solid #DBDBDC', width: '620px' }}
                        placeholder="请输入地址"
                        value={casSerciceUrl}
                      />
                    </Form.Item>
                    <span
                      onClick={() => {
                        const serviceValue = casSerciceUrl;
                        handleCopyForm(serviceValue);
                      }}
                      style={{
                        cursor: 'pointer',
                        height: '33px',
                        color: '#1B6DFA',
                        display: 'flex',
                        alignItems: 'center',
                        marginLeft: '10px',
                      }}
                    >
                      <SvgIcon icon="singlecopy" size={16} />
                      复制
                    </span>
                  </div>
                  <span
                    style={{
                      width: '620px',
                      marginLeft: '200px',
                      color: '#86909C',
                      fontSize: '12px',
                    }}
                  >
                    请将该地址配置到您CAS应用的管理后台中
                  </span>

                  <Form.Item
                    label="用户信息存在位置"
                    name="userinfolocation"
                    // rules={[{ required: true, message: '请输入用户信息' }]}
                    style={{ marginTop: '20px' }}
                    className="formlabel formitem"
                  >
                    <Input
                      style={{ borderRadius: '6px', border: '1px solid #DBDBDC', width: '620px' }}
                      placeholder="value"
                    />
                  </Form.Item>
                  <span
                    style={{
                      width: '620px',
                      marginLeft: '200px',
                      color: '#86909C',
                      fontSize: '12px',
                    }}
                  >
                    假设返回用户信息如下所示，则参数对应值应填入：user
                  </span>

                  <Form.Item
                    label="用户名"
                    name="userName"
                    rules={[{ required: true, message: '请输入用户名' }]}
                    style={{ marginTop: '20px' }}
                    className="formlabel formitem"
                  >
                    <Input
                      style={{ borderRadius: '6px', border: '1px solid #DBDBDC', width: '620px' }}
                      placeholder="userName"
                    />
                  </Form.Item>
                  <span
                    style={{
                      width: '620px',
                      marginLeft: '200px',
                      color: '#86909C',
                      fontSize: '12px',
                    }}
                  >
                    假设返回用户信息如下所示，则参数对应值应填入：name
                  </span>

                  <Form.Item
                    label="学工号"
                    name="userID"
                    rules={[{ required: true, message: '请输入学工号' }]}
                    style={{ marginTop: '20px' }}
                    className="formlabel formitem"
                  >
                    <Input
                      style={{ borderRadius: '6px', border: '1px solid #DBDBDC', width: '620px' }}
                      placeholder="userID"
                    />
                  </Form.Item>
                  <span
                    style={{
                      width: '620px',
                      marginLeft: '200px',
                      color: '#86909C',
                      fontSize: '12px',
                    }}
                  >
                    假设返回用户信息如下所示，则参数对应值应填入：id
                  </span>

                  <div
                    style={{
                      marginTop: '20px',
                      width: '620px',
                      marginLeft: '200px',
                      color: '#86909C',
                      fontSize: '12px',
                    }}
                  >
                    这里是Tips的样式，对应userinfo的结构，该示例中userinfo的结构应为：
                  </div>

                  <Form.Item
                    label="  "
                    style={{ marginTop: '4px' }}
                    className="formlabel formitem maohao"
                  >
                    <Input.TextArea
                      rows={10}
                      disabled
                      value={demojson}
                      style={{ width: '620px' }}
                    />
                  </Form.Item>

                  {/* <Form.Item label="用户映射">
                <Form.List name={['userinfo', 'list']}>
                  {(subFields, subOpt) => (
                    <div style={{ display: 'flex', flexDirection: 'column' }}>
                      {subFields.map((subField) => (
                        <Space key={subField.key} className="icon-lhight">
                          {subField.key < 3 ? (
                            <div style={{ width: '150px', display: 'flex', justifyContent: 'end' }}>
                              {subField.key == 0
                                ? '用户信息存在位置'
                                : subField.key == 1
                                  ? '用户名'
                                  : 'ID'}
                            </div>
                          ) : (
                            <div
                              style={{ width: '150px', display: 'flex', justifyContent: 'end' }}
                            ></div>
                          )}

                          <Form.Item name={[subField.name, 'first']}>
                            <Input disabled={subField.key < 3 ? true : false} placeholder="name" />
                          </Form.Item>
                          <Form.Item
                            name={[subField.name, 'second']}
                            rules={
                              subField.key == 2 || subField.key == 1
                                ? [{ required: true, message: '请输入' }]
                                : []
                            }
                          >
                            <Input placeholder="value" />
                          </Form.Item>
                          {subField.key > 2 && (
                            <CloseOutlined
                              onClick={() => {
                                subOpt.remove(subField.name);
                              }}
                            />
                          )}
                        </Space>
                      ))}
                      <Button type="dashed" onClick={() => subOpt.add()} block>
                        + Add Sub Item
                      </Button>
                    </div>
                  )}
                </Form.List>
              </Form.Item> */}

                  <Form.Item
                    layout="horizontal"
                    label="开启后跳转至应用"
                    className="formlabel"
                    style={{ marginTop: '20px' }}
                  >
                    {/* <Switch
                  checkedChildren="是"
                  unCheckedChildren="否"
                  value={appid ? true : false}
                  onChange={(e) => {
                    if (e == true) {
                      setIsShowModel(true);
                      // getFusionAppList()
                    } else {
                      setAppId(null);
                    }
                  }}
                /> */}
                    <Radio.Group
                      value={!!appid}
                      onChange={(e) => {
                        if (e.target.value == true) {
                          setIsShowModel(true);
                          // getFusionAppList()
                        } else {
                          setAppId(null);
                        }
                      }}
                      options={[
                        { value: true, label: '是' },
                        { value: false, label: '否' },
                      ]}
                    />
                  </Form.Item>

                  {appid && (
                    <Form.Item
                      style={{ marginTop: '20px' }}
                      className="formlabel maohao"
                      layout="horizontal"
                      label="   "
                    >
                      <div>
                        {fusionName}{' '}
                        <span
                          onClick={() => setIsShowModel(true)}
                          className="ml-2 cursor-pointer text-[#1B6DFA]"
                        >
                          <SvgIcon icon="singleedit" size={16} />
                          编辑
                        </span>
                      </div>
                    </Form.Item>
                  )}

                  <Form.Item
                    layout="horizontal"
                    label="   "
                    className="maohao formlabel"
                    style={{ marginTop: '20px' }}
                  >
                    <div
                      style={{
                        width: '620px',
                        border: '1px solid #DBDBDC',
                        borderRadius: '6px',
                      }}
                    >
                      <div
                        style={{
                          padding: '0 16px',
                          backgroundColor: '#F7F8FA',
                          height: '40px',
                          display: 'flex',
                          justifyContent: 'space-between',
                          alignItems: 'center',
                          borderRadius: '6px',
                        }}
                      >
                        <span>单点登录地址</span>
                        <span
                          onClick={() => {
                            const serviceValue = tourl;
                            handleCopyForm(serviceValue);
                          }}
                          style={{
                            cursor: 'pointer',
                            height: '33px',
                            color: '#1B6DFA',
                            display: 'flex',
                            alignItems: 'center',
                            marginLeft: '10px',
                          }}
                        >
                          <SvgIcon icon="singlecopy" size={16} />
                          复制
                        </span>
                      </div>
                      <div style={{ padding: '20px', backgroundColor: 'rgba(242,243,245)' }}>
                        {tourl}
                      </div>
                    </div>
                  </Form.Item>
                </Form>
              </div>
            </div>
          )}
        </div>
      ),
    },
    {
      key: '2',
      label: 'OAuth2 协议',
      // icon: <AndroidOutlined />,
      children: (
        <div>
          {isloading ? (
            <div style={{ height: '300px', width: '100%' }}>
              <CircleLoading />
            </div>
          ) : (
            <div>
              <div
                style={{
                  marginTop: '10px',
                  borderRadius: '8px',
                  height: '40px',
                  display: 'flex',
                  alignItems: 'center',
                  backgroundColor: '#F0F7FF',
                  marginBottom: '10px',
                }}
              >
                <SvgIcon icon="singletip" size="22px" style={{ margin: '0 4px 0 20px' }} />
                OAuth2协议只支持授权码模式
              </div>
              <div
                style={{
                  fontWeight: 400,
                  fontSize: '16px',
                  color: '#6C7180',
                  height: 'calc(100vh - 350px)',
                  overflow: 'auto',
                  scrollbarWidth: 'none',
                  marginTop: '30px',
                }}
              >
                <Form initialValues={formBaseValueOauth} form={formOauth} layout="horizontal">
                  <Form.Item
                    layout="horizontal"
                    label="选择ID类型"
                    className="formlabel formitem"
                    name="IsAppID"
                  >
                    <Radio.Group
                      value={!!appid}
                      onChange={(e) => {
                        setIsappid(e.target.value);
                      }}
                      options={[
                        { value: false, label: 'Client ID' },
                        { value: true, label: 'App ID' },
                      ]}
                    />
                  </Form.Item>
                  {/* <span style={{ width: "620px", marginLeft: "200px", color: "#86909C", fontSize: "12px" }}></span> */}

                  {isappid ? (
                    <Form.Item
                      label="应用ID"
                      name="app_id"
                      rules={[{ required: true, message: '请输入App ID' }]}
                      style={{ marginTop: '20px' }}
                      className="formlabel formitem"
                    >
                      <Input
                        style={{ borderRadius: '6px', border: '1px solid #DBDBDC', width: '620px' }}
                        placeholder="请输入App ID"
                      />
                    </Form.Item>
                  ) : (
                    <Form.Item
                      label="客户端ID"
                      name="client_id"
                      rules={[{ required: true, message: '请输入Client ID' }]}
                      style={{ marginTop: '20px' }}
                      className="formlabel formitem"
                    >
                      <Input
                        style={{ borderRadius: '6px', border: '1px solid #DBDBDC', width: '620px' }}
                        placeholder="请输入Client ID"
                      />
                    </Form.Item>
                  )}
                  <span
                    style={{
                      width: '620px',
                      marginLeft: '200px',
                      color: '#86909C',
                      fontSize: '12px',
                    }}
                  >
                    {isappid ? '第三方应用在授权服务器的注册标识' : '客户端应用的唯一公开标识符'}
                  </span>

                  {isappid ? (
                    <Form.Item
                      label="客户端密钥"
                      name="app_secret"
                      rules={[{ required: true, message: '请输入App Secret' }]}
                      style={{ marginTop: '20px' }}
                      className="formlabel formitem"
                    >
                      <Input
                        style={{ borderRadius: '6px', border: '1px solid #DBDBDC', width: '620px' }}
                        placeholder="请输入App Secret"
                      />
                    </Form.Item>
                  ) : (
                    <Form.Item
                      label="客户端密钥"
                      name="client_secret"
                      rules={[{ required: true, message: '请输入Client Secret' }]}
                      style={{ marginTop: '20px' }}
                      className="formlabel formitem"
                    >
                      <Input
                        style={{ borderRadius: '6px', border: '1px solid #DBDBDC', width: '620px' }}
                        placeholder="请输入Client Secret"
                      />
                    </Form.Item>
                  )}
                  <span
                    style={{
                      width: '620px',
                      marginLeft: '200px',
                      color: '#86909C',
                      fontSize: '12px',
                    }}
                  >
                    {isappid
                      ? '由 OAuth2.0 鉴权服务器颁发给应用的密钥凭证，用于身份验证'
                      : '由 OAuth2.0 鉴权服务器颁发给应用的密钥凭证，用于身份验证'}
                  </span>

                  <Form.Item
                    label="授权范围"
                    name="scope"
                    style={{ marginTop: '20px' }}
                    className="formlabel formitem"
                    // rules={[{ required: true, message: '请输入scope' }]}
                  >
                    <Input
                      style={{ borderRadius: '6px', border: '1px solid #DBDBDC', width: '620px' }}
                      placeholder="请输入scope"
                    />
                  </Form.Item>
                  <span
                    style={{
                      width: '620px',
                      marginLeft: '200px',
                      color: '#86909C',
                      fontSize: '12px',
                    }}
                  >
                    请求访问的资源权限范围
                  </span>

                  <Form.Item
                    label="授权服务器登录地址"
                    name="login_url"
                    rules={[{ required: true, message: '请输入授权服务器登录地址' }]}
                    style={{ marginTop: '20px' }}
                    className="formlabel formitem"
                  >
                    <Input
                      style={{ borderRadius: '6px', border: '1px solid #DBDBDC', width: '620px' }}
                      placeholder="请输入授权服务器登录地址"
                    />
                  </Form.Item>
                  <span
                    style={{
                      width: '620px',
                      marginLeft: '200px',
                      color: '#86909C',
                      fontSize: '12px',
                    }}
                  >
                    用户跳转至授权服务器进行认证的入口URL
                  </span>

                  <Form.Item
                    label="令牌兑换地址"
                    name="redeem_url"
                    rules={[{ required: true, message: '请输入授权地址' }]}
                    style={{ marginTop: '20px' }}
                    className="formlabel formitem"
                  >
                    <Input
                      style={{ borderRadius: '6px', border: '1px solid #DBDBDC', width: '620px' }}
                      placeholder="请输入授权地址"
                    />
                  </Form.Item>
                  <span
                    style={{
                      width: '620px',
                      marginLeft: '200px',
                      color: '#86909C',
                      fontSize: '12px',
                    }}
                  >
                    用授权码(code)兑换访问令牌(token)的API端点
                  </span>

                  <div style={{ display: 'flex', marginTop: '20px' }}>
                    <Form.Item
                      label="回调地址"
                      // name="redirect_uri"
                      rules={[{ required: true, message: '请输入重定向地址' }]}
                      // style={{ marginTop: "20px" }}
                      className="formlabel formitem redicon"
                    >
                      <Input
                        disabled
                        style={{ borderRadius: '6px', border: '1px solid #DBDBDC', width: '620px' }}
                        placeholder="请输入重定向地址"
                        value={oauthRedirectUri}
                      />
                    </Form.Item>
                    <span
                      onClick={() => {
                        const serviceValue = formOauth.getFieldValue('redirect_uri');
                        handleCopyForm(serviceValue);
                      }}
                      style={{
                        cursor: 'pointer',
                        height: '33px',
                        color: '#1B6DFA',
                        display: 'flex',
                        alignItems: 'center',
                        marginLeft: '10px',
                      }}
                    >
                      <SvgIcon icon="singlecopy" size={16} />
                      复制
                    </span>
                  </div>
                  <span
                    style={{
                      width: '620px',
                      marginLeft: '200px',
                      color: '#86909C',
                      fontSize: '12px',
                    }}
                  >
                    请将该地址配置到您OAuth2应用的管理后台中
                  </span>

                  <Form.Item
                    label="用户信息端点"
                    name="profile_url"
                    rules={[{ required: true, message: '请输入请求角色身份地址' }]}
                    style={{ marginTop: '20px' }}
                    className="formlabel formitem"
                  >
                    <Input
                      style={{ borderRadius: '6px', border: '1px solid #DBDBDC', width: '620px' }}
                      placeholder="请输入请求角色身份地址"
                    />
                  </Form.Item>
                  <span
                    style={{
                      width: '620px',
                      marginLeft: '200px',
                      color: '#86909C',
                      fontSize: '12px',
                    }}
                  >
                    获取用户角色/资料的API地址（如OIDC的UserInfo端点）
                  </span>

                  <Form.Item
                    label="登出地址"
                    name="logout_url"
                    style={{ marginTop: '20px' }}
                    className="formlabel formitem"
                  >
                    <Input
                      style={{ borderRadius: '6px', border: '1px solid #DBDBDC', width: '620px' }}
                      placeholder="请输入登出地址"
                    />
                  </Form.Item>
                  <span
                    style={{
                      width: '620px',
                      marginLeft: '200px',
                      color: '#86909C',
                      fontSize: '12px',
                    }}
                  >
                    授权服务器的全局会话终止端点
                  </span>

                  <Form.Item
                    label="刷新令牌地址"
                    name="refresh_token_url"
                    style={{ marginTop: '20px' }}
                    className="formlabel formitem"
                  >
                    <Input
                      style={{ borderRadius: '6px', border: '1px solid #DBDBDC', width: '620px' }}
                      placeholder="请输入刷新令牌地址"
                    />
                  </Form.Item>
                  <span
                    style={{
                      width: '620px',
                      marginLeft: '200px',
                      color: '#86909C',
                      fontSize: '12px',
                    }}
                  >
                    刷新令牌地址
                  </span>

                  <Form.Item
                    label="额外参数"
                    style={{ marginTop: '20px' }}
                    className="formlabel formitem"
                  >
                    <div
                      style={{
                        width: '620px',
                        border: '1px solid #DBDBDC',
                        borderRadius: '6px',
                      }}
                    >
                      <div
                        style={{
                          padding: '0 16px',
                          backgroundColor: '#F7F8FA',
                          height: '40px',
                          display: 'flex',
                          justifyContent: 'space-between',
                          alignItems: 'center',
                          borderRadius: '6px',
                        }}
                      >
                        <span>json</span>
                        <span
                          onClick={() => {
                            const serviceValue = extraJson;
                            handleCopyForm(serviceValue);
                          }}
                          style={{
                            cursor: 'pointer',
                            height: '33px',
                            color: '#1B6DFA',
                            display: 'flex',
                            alignItems: 'center',
                            marginLeft: '10px',
                          }}
                        >
                          <SvgIcon icon="singlecopy" size={16} />
                          复制
                        </span>
                      </div>
                      <JsonEditor
                        defaultHeight={200}
                        resize
                        value={extraJson}
                        onChange={(e) => {
                          setExtraJson(e);
                        }}
                      />
                    </div>
                  </Form.Item>

                  <Form.Item
                    label="用户信息存在位置"
                    name="userinfolocation"
                    // rules={[{ required: true, message: '请输入用户信息' }]}
                    style={{ marginTop: '20px' }}
                    className="formlabel formitem"
                  >
                    <Input
                      style={{ borderRadius: '6px', border: '1px solid #DBDBDC', width: '620px' }}
                      placeholder="value"
                    />
                  </Form.Item>
                  <span
                    style={{
                      width: '620px',
                      marginLeft: '200px',
                      color: '#86909C',
                      fontSize: '12px',
                    }}
                  >
                    假设返回用户信息如下所示，则参数对应值应填入：user
                  </span>

                  <Form.Item
                    label="用户名"
                    name="userName"
                    rules={[{ required: true, message: '请输入用户名' }]}
                    style={{ marginTop: '20px' }}
                    className="formlabel formitem"
                  >
                    <Input
                      style={{ borderRadius: '6px', border: '1px solid #DBDBDC', width: '620px' }}
                      placeholder="userName"
                    />
                  </Form.Item>
                  <span
                    style={{
                      width: '620px',
                      marginLeft: '200px',
                      color: '#86909C',
                      fontSize: '12px',
                    }}
                  >
                    假设返回用户信息如下所示，则参数对应值应填入：name
                  </span>

                  <Form.Item
                    label="学工号"
                    name="userID"
                    rules={[{ required: true, message: '请输入学工号' }]}
                    style={{ marginTop: '20px' }}
                    className="formlabel formitem"
                  >
                    <Input
                      style={{ borderRadius: '6px', border: '1px solid #DBDBDC', width: '620px' }}
                      placeholder="userID"
                    />
                  </Form.Item>
                  <span
                    style={{
                      width: '620px',
                      marginLeft: '200px',
                      color: '#86909C',
                      fontSize: '12px',
                    }}
                  >
                    假设返回用户信息如下所示，则参数对应值应填入：id
                  </span>

                  <div
                    style={{
                      marginTop: '20px',
                      width: '620px',
                      marginLeft: '200px',
                      color: '#86909C',
                      fontSize: '12px',
                    }}
                  >
                    这里是Tips的样式，对应userinfo的结构，该示例中userinfo的结构应为：
                  </div>

                  <Form.Item
                    label="  "
                    style={{ marginTop: '4px' }}
                    className="formlabel formitem maohao"
                  >
                    <Input.TextArea
                      rows={10}
                      disabled
                      value={demojson}
                      style={{ width: '620px' }}
                    />
                  </Form.Item>

                  {/* <Form.Item label="获取公钥地址" name="jwks_url" tooltip="获取公钥地址/jwks_url">
                <Input
                  style={{ borderRadius: '6px', border: '1px solid #DBDBDC' }}
                  placeholder={'请输入获取公钥地址'}
                />
              </Form.Item> */}

                  {/* <Form.Item label="重定向地址额外参数">
                <Form.List name={['redeem_url_kworgs', 'list']}>
                  {(subFields, subOpt) => (
                    <div style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}>
                      {subFields.map((subField) => (
                        <Space key={subField.key}>
                          <Form.Item noStyle name={[subField.name, 'first']}>
                            <Input placeholder="name" />
                          </Form.Item>
                          <Form.Item noStyle name={[subField.name, 'second']}>
                            <Input placeholder="value" />
                          </Form.Item>
                          <CloseOutlined
                            onClick={() => {
                              console.log(subField);
                              subOpt.remove(subField.name);
                            }}
                          />
                        </Space>
                      ))}
                      <Button type="dashed" onClick={() => subOpt.add()} block>
                        + Add Sub Item
                      </Button>
                    </div>
                  )}
                </Form.List>
              </Form.Item> */}

                  {/* <Form.Item
                label="授权登录地址额外字段"
                name="logout_url_extra"
                tooltip="授权登录地址额外字段"
              >
                <Input
                  style={{ borderRadius: '6px', border: '1px solid #DBDBDC' }}
                  placeholder={'请输入授权登录地址额外字段'}
                />
              </Form.Item> */}

                  {/* <Form.Item label="授权登录地址额外参数">
                <Form.List name={['login_url_kwargs', 'list']}>
                  {(subFields, subOpt) => (
                    <div style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}>
                      {subFields.map((subField) => (
                        <Space key={subField.key}>
                          <Form.Item noStyle name={[subField.name, 'first']}>
                            <Input placeholder="name" />
                          </Form.Item>
                          <Form.Item noStyle name={[subField.name, 'second']}>
                            <Input placeholder="value" />
                          </Form.Item>
                          <CloseOutlined
                            onClick={() => {
                              console.log(subField);

                              subOpt.remove(subField.name);
                            }}
                          />
                        </Space>
                      ))}
                      <Button type="dashed" onClick={() => subOpt.add()} block>
                        + Add Sub Item
                      </Button>
                    </div>
                  )}
                </Form.List>
              </Form.Item> */}

                  {/* <Form.Item
                label="额外参数"
                name="extra"
                tooltip="授权登录地址额外字段"
              >
                <Input
                  style={{ borderRadius: '6px', border: '1px solid #DBDBDC' }}
                  placeholder={'请输入额外参数'}
                />
              </Form.Item> */}

                  {/* 额外参数 */}
                  {/* <Form.Item label="额外参数">
                <Form.List name={['extra', 'list']}>
                  {(subFields, subOpt) => (
                    <div style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}>
                      {subFields.map((subField) => (
                        <Space key={subField.key}>
                          <Form.Item noStyle name={[subField.name, 'first']}>
                            <Input placeholder="name" />
                          </Form.Item>
                          <Form.Item noStyle name={[subField.name, 'second']}>
                            <Input placeholder="value" />
                          </Form.Item>
                          <CloseOutlined
                            onClick={() => {
                              console.log(subField);

                              subOpt.remove(subField.name);
                            }}
                          />
                        </Space>
                      ))}
                      <Button type="dashed" onClick={() => subOpt.add()} block>
                        + Add Sub Item
                      </Button>
                    </div>
                  )}
                </Form.List>
              </Form.Item> */}

                  {/* <Form.Item label="用户映射">
                <Form.List name={['userinfo', 'list']}>
                  {(subFields, subOpt) => (
                    <div style={{ display: 'flex', flexDirection: 'column' }}>
                      {subFields.map((subField) => (
                        <Space key={subField.key} className="icon-lhight">
                          {subField.key < 3 ? (
                            <div style={{ width: '150px', display: 'flex', justifyContent: 'end' }}>
                              {subField.key == 0
                                ? '用户信息存在位置'
                                : subField.key == 1
                                  ? '用户名'
                                  : 'ID'}
                            </div>
                          ) : (
                            <div
                              style={{ width: '150px', display: 'flex', justifyContent: 'end' }}
                            ></div>
                          )}
                          <Form.Item name={[subField.name, 'first']}>
                            <Input disabled={subField.key < 3 ? true : false} placeholder="name" />
                          </Form.Item>
                          <Form.Item
                            name={[subField.name, 'second']}
                            rules={
                              subField.key == 2 || subField.key == 1
                                ? [{ required: true, message: '请输入' }]
                                : []
                            }
                          >
                            <Input placeholder="value" />
                          </Form.Item>
                          {subField.key > 2 && (
                            <CloseOutlined
                              onClick={() => {
                                subOpt.remove(subField.name);
                              }}
                            />
                          )}
                        </Space>
                      ))}
                      <Button type="dashed" onClick={() => subOpt.add()} block>
                        + Add Sub Item
                      </Button>
                    </div>
                  )}
                </Form.List>
              </Form.Item> */}

                  <Form.Item
                    layout="horizontal"
                    label="开启后跳转至应用"
                    style={{ marginTop: '20px' }}
                    className="formlabel formitem"
                  >
                    <Radio.Group
                      value={!!appidOauth}
                      onChange={(e) => {
                        if (e.target.value == true) {
                          setIsShowModel(true);
                        } else {
                          setAppIdOauth(null);
                        }
                      }}
                      options={[
                        { value: true, label: '是' },
                        { value: false, label: '否' },
                      ]}
                    />
                  </Form.Item>

                  {/* <Form.Item
                layout="horizontal"
                label="开启后跳转至融合应用"
              // name="isFusionApp"
              >
                <Switch
                  checkedChildren="是"
                  unCheckedChildren="否"
                  value={appidOauth ? true : false}
                  onChange={(e) => {
                    if (e == true) {
                      setIsShowModel(true);
                      // getFusionAppList()
                    } else {
                      setAppIdOauth(null);
                    }
                  }}
                />
              </Form.Item> */}

                  {appidOauth && (
                    <Form.Item layout="horizontal" label="   " className="maohao formlabel">
                      <div>
                        {fusionNameOauth}{' '}
                        <span
                          onClick={() => setIsShowModel(true)}
                          className="ml-2 cursor-pointer text-[#1B6DFA]"
                        >
                          <SvgIcon icon="singleedit" size={16} />
                          编辑
                        </span>
                      </div>
                    </Form.Item>
                  )}

                  <Form.Item
                    layout="horizontal"
                    label="   "
                    className="maohao formlabel"
                    style={{ marginTop: '20px' }}
                  >
                    <div
                      style={{
                        width: '620px',
                        border: '1px solid #DBDBDC',
                        borderRadius: '6px',
                      }}
                    >
                      <div
                        style={{
                          padding: '0 16px',
                          backgroundColor: '#F7F8FA',
                          height: '40px',
                          display: 'flex',
                          justifyContent: 'space-between',
                          alignItems: 'center',
                          borderRadius: '6px',
                        }}
                      >
                        <span>单点登录地址</span>
                        <span
                          onClick={() => {
                            const serviceValue = tourlOauth2;
                            handleCopyForm(serviceValue);
                          }}
                          style={{
                            cursor: 'pointer',
                            height: '33px',
                            color: '#1B6DFA',
                            display: 'flex',
                            alignItems: 'center',
                            marginLeft: '10px',
                          }}
                        >
                          <SvgIcon icon="singlecopy" size={16} />
                          复制
                        </span>
                      </div>
                      <div style={{ padding: '20px', backgroundColor: 'rgba(242,243,245)' }}>
                        {tourlOauth2}
                      </div>
                    </div>
                  </Form.Item>
                </Form>
              </div>
            </div>
          )}
        </div>
      ),
    },
    {
      key: '3',
      label: '本地账户登录',
      children: (
        <div>
          <div
            style={{
              fontWeight: 400,
              fontSize: '16px',
              color: '#6C7180',
              marginTop: '10px',
              height: 'calc(100vh - 320px)',
              overflow: 'auto',
            }}
          >
            <div style={{ display: 'flex', alignItems: 'center' }} className="my-1">
              <span style={{ marginRight: '12px', fontSize: '16px' }}>是否启用本地账户登录</span>
              <Switch
                checked={localAccountEnabled}
                onChange={handleLocalAccountToggle}
                checkedChildren="是"
                unCheckedChildren="否"
              />
            </div>
            <div style={{ color: '#86909C', fontSize: '14px' }}>
              启用后，用户可以使用本地账户进行登录认证
            </div>
          </div>
        </div>
      ),
    },
  ];

  const validateTabChange = async (nextTab?: string) => {
    router.push(managePage);
  };

  const submit = async () => {
    try {
      console.log('tabType===========', tabType);
      let values;
      if (tabType == '1') {
        values = await form.validateFields();
        console.log('values===========', values);
        values.fusionApp = appid;
        values.isFusionApp = !!appid;
        // values.horizontal = 'yes';
        values.standard = true;
        values.protocolName = 'cas';
        const casSerciceUrlsubmit = `${window.location.origin}/cas/auth`;

        values.service = casSerciceUrlsubmit;
        // values.fusionAppurl = fusionUrl
      }
      if (tabType == '2') {
        values = await formOauth.validateFields();
        console.log('values===========', values);

        values.fusionApp = appidOauth;
        values.isFusionApp = !!appidOauth;
        // values.horizontal = 'yes';
        values.standard = true;
        // 方法1：修复为合法JSON格式后解析
        // const fixedJsonString = extraJson
        //   .replace(/(\w+):/g, '"$1":')  // 给属性名加引号
        //   .replace(/\r\n/g, '')         // 移除换行符
        //   .replace(/\s+/g, '');         // 移除所有空白字符

        // values.extra = fixedJsonString ? JSON.parse(fixedJsonString) : "";
        values.extra = extraJson;
        values.protocolName = 'oauth2';
        const oauthRedirectUrisubmit = `${window.location.origin}/oauth2/auth`;
        values.redirect_uri = oauthRedirectUrisubmit;
        // values.fusionAppurl = fusionUrlOauth
        // values.fusionAppurl = fusionUrlOauth
      }
      // if (tabType == '3') {
      //   values = await formVx.validateFields();
      // }

      const transformedData = transformUserInfo(values);
      console.log('1111111111111111111111========', values, transformedData);
      await singleSignSvc.postSsoSetting({
        ...transformedData,
        // protocolName: tabType == 1 ? 'cas' : tabType == 2 ? 'oauth2' : 'wxwork',
      });
      message.success('配置成功');
      getinit();
    } catch (errorInfo) {
      console.log('配置失败', errorInfo);
    }
  };

  const transformUserInfo = (data: any) => {
    let standardValue;
    if (data.standard === true) {
      standardValue = 'Yes';
    } else {
      standardValue = 'No';
    }

    if (tabType == '2') {
      console.log('data=================', data);
      const { userID, userName, userinfolocation, ...restData } = data;

      // const newredeem_url_kworgs = generateKeyValueObject(data.redeem_url_kworgs.list);
      // const newlogin_url_kwargs = generateKeyValueObject(data.login_url_kwargs.list);
      // const newextra = generateKeyValueObject(data.extra.list);
      return {
        ...restData, // 保留其他字段
        userinfo: {
          userID: data.userID,
          userName: data.userName,
          userinfolocation: data.userinfolocation || '',
        },
        standard: standardValue,
        // redeem_url_kworgs: newredeem_url_kworgs,
        // login_url_kwargs: newlogin_url_kwargs,
        // extra: newextra,
      };
    }

    if (tabType == '1') {
      const { userID, userName, userinfolocation, ...restData } = data;

      return {
        ...restData, // 保留其他字段
        userinfo: {
          userID: data.userID,
          userName: data.userName,
          userinfolocation: data.userinfolocation || '',
        },
        standard: standardValue,
        IsAppID: false,
      };
    }
  };

  const generateKeyValueObject = (list: { first: string; second: any }[]): Record<string, any> => {
    const newUserInfo: Record<string, any> = {}; // 初始化一个空对象

    // 遍历数组
    list?.forEach((item) => {
      console.log(item.first, item.second);
      if (!item.first || item.second == null) return;

      try {
        let parsedValue = item.second;

        // 处理字符串类型的特殊转换
        if (typeof item.second === 'string') {
          // 处理非标准JSON格式（含单引号/无引号）
          const sanitized = item.second
            .trim()
            .replace(/'/g, '"') // 单引号转双引号
            .replace(/(\w+):/g, '"$1":'); // 为键名添加引号

          parsedValue = JSON.parse(sanitized);
        }

        // 数字类型转字符串（包含整型）
        if (typeof parsedValue === 'number') {
          parsedValue = parsedValue.toString();
        }
        // 处理嵌套对象结构
        else if (typeof parsedValue === 'object' && parsedValue !== null) {
          parsedValue = Object.entries(parsedValue).reduce((acc, [key, val]) => {
            acc[key] = typeof val === 'number' ? val.toString() : val;
            return acc;
          }, {} as Record<string, any>);
        }

        newUserInfo[item.first] = parsedValue;
      } catch (e) {
        // 保持原始值 + 基础类型转换
        newUserInfo[item.first] =
          typeof item.second === 'number' ? item.second.toString() : item.second;
      }
    });

    return newUserInfo; // 返回生成的对象
  };

  const handleCopyForm = (serviceValue: any) => {
    if (serviceValue) {
      const textArea = document.createElement('textarea');
      textArea.value = serviceValue;
      document.body.appendChild(textArea);
      textArea.select();
      try {
        document.execCommand('copy');
        message.success('复制成功！');
      } catch {
        message.error('复制失败，请手动复制');
      }
      document.body.removeChild(textArea);
    } else {
      message.warning('没有内容可复制');
    }
  };

  const handleCopy = async () => {
    if (navigator.clipboard) {
      await navigator.clipboard
        .writeText(tabType == '1' ? tourl : tourlOauth2)
        .catch(() => fallbackCopy());
    } else {
      fallbackCopy();
    }
  };

  const fallbackCopy = () => {
    const textArea = document.createElement('textarea');
    textArea.value = tabType == '1' ? tourl : tourlOauth2;
    document.body.appendChild(textArea);
    textArea.select();
    try {
      document.execCommand('copy');
      message.success('复制成功！');
    } catch {
      message.error('复制失败，请手动复制');
    }
    document.body.removeChild(textArea);
  };

  // className=" flex-1 overflow-auto [-ms-overflow-style:none] [scrollbar-width:none]"
  return (
    <div className="flex h-full flex-col">
      {/* <PagesHeader>单点登录</PagesHeader> */}

      <div className="h-full">
        <div
          style={{
            backgroundColor: '#FFFFFF',
            // overflow: 'auto'
            // minHeight: 'calc(100vh - 84px)',
            height: '100%',
          }}
          className="mt-[0px] rounded-[12px] p-[20px]"
        >
          <div
            style={{
              color: '#1D2129',
              lineHeight: '24px',
              fontWeight: 'bold',
              fontSize: '16px',
              marginBottom: '10px',
            }}
          >
            登录配置
            <TipDesc title="配置与企业统一身份认证系统的集成" />
          </div>
          <div style={{ width: '100%', height: '100%' }}>
            {/* <Form.Item label="单点登录类型" style={{ marginBottom: '10px', marginTop: '10px' }}>
                <Radio.Group
                  name="radiogroup"
                  defaultValue={1}
                  value={radiaType}
                  onChange={(e) => {
                    radiaTypeChange(e.target.value);
                  }}
                  options={[
                    { value: 1, label: 'Cas' },
                    { value: 2, label: 'Oauth2' },
                  ]}
                />
              </Form.Item> */}

            <div
              style={{
                height: 'calc(100% - 100px)',
              }}
            >
              <Tabs
                defaultActiveKey="1"
                // items={tabItem}
                className="tab-outline h-full"
                items={items2}
                onChange={(e: string) => {
                  console.log(e);
                  setTabType(e);
                }}
              />
            </div>

            {/* {tourl && tabType == 1 && (
                <Tag
                  className="ant-tag-right"

                  title="点击复制"
                  style={{
                    padding: '20px',
                    fontSize: '16px',
                    display: 'flex',
                    justifySelf: 'end',
                    marginBottom: '20px',
                    cursor: 'pointer',
                  }}
                  onClick={handleCopy}
                >
                  {tourl}
                </Tag>
              )}
              {tourlOauth2 && tabType == 2 && (
                <Tag
                  className="ant-tag-right"

                  title="点击复制"
                  style={{
                    padding: '20px',
                    fontSize: '16px',
                    display: 'flex',
                    justifySelf: 'end',
                    marginBottom: '20px',
                    cursor: 'pointer',
                  }}
                  onClick={handleCopy}
                >
                  {tourlOauth2}
                </Tag>

              )} */}
            <div className="mt-6 flex w-full items-center">
              <Space size="middle" style={{ marginLeft: '400px' }}>
                {tabType != '3' && (
                  <Button onClick={submit} type="primary">
                    提交
                  </Button>
                )}

                {tabType == '1' && (
                  <Button
                    type="link"
                    style={{ color: themeToken.colorPrimary }}
                    // href={tourl}
                    onClick={() => {
                      console.log('tourl==============', tourl);
                      window.open(tourl);
                    }}
                    disabled={!tourl}
                  >
                    测试登录
                  </Button>
                )}

                {tabType == '2' && (
                  <Button
                    type="link"
                    style={{ color: themeToken.colorPrimary }}
                    href="/openapi/v1/oauth2/login"
                    disabled={!tourlOauth2}
                  >
                    测试登录
                  </Button>
                )}

                {/* <Button
                    type="link"
                    style={{ color: themeToken.colorPrimary }}
                    href={tabType == 1 ? tourl : tabType == 2 ? tourlOauth2 : tourlWx}
                    disabled={
                      tabType == 1 ? tourl : tabType == 2 ? tourlOauth2 : tourlWx ? false : true
                    }
                  >
                    测试登录
                  </Button> */}
              </Space>
            </div>
          </div>
        </div>
      </div>

      <FusionappModel
        isShowModel={isShowModel}
        handleCancel={fusionModelCancel}
        goToAssistant={goToAssistant}
        // fusionApp={tabType == 1 ? fusionApp : fusionAppOauth}
        fusionApp={fusionApp}
      />

      <TipsModals
        open={showConfirmModal}
        onCancel={() => setShowConfirmModal(false)}
        onOk={handleConfirmClose}
        okText="确认"
        cancelText="取消"
      >
        <div className="text-[14px] leading-[22px] text-text-4">
          关闭后用户将无法使用本地账户进行登录，确认关闭？
        </div>
      </TipsModals>
    </div>
  );
};

export default App;
